<template>
    <div>
        <div id="container"></div>
        <div class="input-card" style="width:24rem;">
            <h4>添加、删除覆盖物</h4>
            <div class="input-item">
                <label>Marker：</label>
                <button class="btn" id="add-marker" style="margin-right:1rem;">添加Marker</button>
                <button class="btn" id="remove-marker">删除Marker</button>
            </div>
            <div class="input-item">
                <label>Circle：</label>
                <button class="btn" id="add-circle" style="margin-right:1rem;">添加Circle</button>
                <button class="btn" id="remove-circle">删除Circle</button>
            </div>
        </div>
    </div>
</template>

<script setup>
import { onMounted, onUnmounted } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";

let map = null;

onMounted(() => {
    window._AMapSecurityConfig = {
        securityJsCode: "829ad09ae782570684d61f67a080c944",
    };
    AMapLoader.load({
        key: "b196cc6ae3600c969bd4ab4e5f434475", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
    })
        .then((AMap) => {
            map = new AMap.Map("container", {
                resizeEnable: true,
                zoom: 11,
                center: [116.397428, 39.90923]
            });
            // 构造点标记
            var marker = new AMap.Marker({
                icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
                position: [116.405467, 39.907761],
                anchor: 'bottom-center'
            });
            // 构造矢量圆形
            var circle = new AMap.Circle({
                center: new AMap.LngLat("116.403322", "39.920255"), // 圆心位置
                radius: 1000,  //半径
                strokeColor: "#F33",  //线颜色
                strokeOpacity: 1,  //线透明度
                strokeWeight: 3,  //线粗细度
                fillColor: "#ee2200",  //填充颜色
                fillOpacity: 0.35 //填充透明度
            });


            //事件绑定
            document.querySelector("#add-marker").onclick = function () {
                map.add(marker);
                map.setFitView();
            }
            document.querySelector("#remove-marker").onclick = function () {
                map.remove(marker);
                map.setFitView();
            }
            document.querySelector("#add-circle").onclick = function () {
                map.add(circle);
                map.setFitView();
            }
            document.querySelector("#remove-circle").onclick = function () {
                map.remove(circle);
                map.setFitView();
            }
        })
        .catch((e) => {
            console.log(e);
        });
});

onUnmounted(() => {
    map?.destroy();
});
</script>

<style lang="scss" scoped>
#container {
    width: 800px;
    height: 800px;
}
</style>